<template>
    <div id="tmpl">
        <!-- 搜索框 -->
        <div class="searchBox">
            <input type="text" placeholder="搜一搜你想要的" class="Search">
        </div>
        <!-- 轮播图 -->
        <silder :imgs="list"></silder>
        <!-- 领取优惠券 -->
        <div class="coupon">
            <img src="../../statics/imgs/coupon.png"  width="702px" height="100px" alt="领取优惠券" title="点击领取优惠券">
        </div>
        <!-- 导航栏 -->
        <div class="nav">
            <ul >
                <li v-for="item in list">
                    <a href="#">
                    <img :src="item.imagePath" >
                    <span class="txt">{{item.navName}}</span>
                    </a>
                   
                </li>
                 
            </ul>
        </div>
    <!-- 热门推荐 -->
    <div class="hot">
        <img src="../../statics/imgs/hot.png" alt="">
    </div>
    <!-- 热门折扣 -->
    <div class="hotDiscount">
        <ul>
            <li>
                <img src="../../statics/imgs/hotIco.png" alt="">
                <a href="#" id="hotA">
                    <div class="Discount_1">
                   <img :src="hotList[0].imagePath" id="milk">
                   <div class="tit">
                        <p class="tit_1">双人童车</p>
                        <p class="tit_2">新型奶粉</p>
                       
                        <div class="price" v-if="item.discountPrice" >
                            <span >￥{{hotList[0].discountPrice}}</span>
                            <del>￥{{hotList[0].sellPrice}}</del>
                        </div>
                         <div class="mainCar" v-if="item.discountPrice">
                           
                                <span class="tit_11" v-if="item.discountPrice">￥{{item.discountPrice}}</span>
                                 <del class="tit_12" v-if="item.sellPrice">￥{{item.sellPrice}}</del>
                           
                           
                            <a href="#">
                                <img src="../../statics/imgs/car.png" alt="" id="mainCar">
                            </a>
                            
                        </div>
                        <div  class="mainCar" v-else>
                            
                                <span class="tit_11" v-if="item.sellPrice">￥{{item.sellPrice}}</span>
                               
                           
                           
                            <a href="#">
                                <img src="../../statics/imgs/car.png" alt="" id="mainCar">
                            </a>
                        </div>
                   </div>
                 
                </div>
               </a>
                

            </li>
            <li>
              
                    <div class="car" >
                        <p class="tit_3">双人童车</p>
                        <p class="tit_4">限时折扣</p>
                        <div class="last">最后疯抢 </div>
                    </div>
                    <img :src="hotList[1].imagePath" alt="" id="car">
                    
             
            </li>
            <li>
                
                    <div class="car" >
                        <p class="tit_3">双人童车</p>
                        <p class="tit_4">限时折扣</p>
                        <div class="last">最后疯抢 </div>
                    </div>
                    <img :src="hotList[2].imagePath" alt="" id="car">
            </li>
            <li>
                 <img src="../../statics/imgs/hotIco.png" alt="">
                 <a href="#" id="hotA">
                    <div class="Discount_1">
                   <img :src="hotList[3].imagePath" alt="" id="milk">
                   <div class="tit">
                        <p class="tit_1">热门钜惠</p>
                        <p class="tit_2">新型奶粉</p>
                        <div class="price" >
                           <span >￥{{hotList[0].discountPrice}}</span>
                            <del>￥{{hotList[0].sellPrice}}</del>
                        </div>
                   </div>
                 
                </div>
               </a>
            </li>
            <li>
                
                    <div class="car" >
                        <p class="tit_3">双人童车</p>
                        <p class="tit_4">限时折扣</p>
                        <div class="last">最后疯抢 </div>
                    </div>
                    <img :src="hotList[4].imagePath" alt="" id="car">
            </li>
            <li>
                
                    <div class="car" >
                        <p class="tit_3">双人童车</p>
                        <p class="tit_4">限时折扣</p>
                        <div class="last">最后疯抢 </div>
                    </div>
                    <img :src="hotList[5].imagePath" alt="" id="car">
            </li>
        </ul>
    </div>    
    <!-- 玩具专区 -->
    <div class="show" v-for = "(item,index) in zoneList">
        <div class="header">
            <div class="centent">
                <img src="../../statics/imgs/numb1.png" alt="">
                <span class="tit_5">{{item.name }}</span>
                <div class="Tit">
                    <p class="tit_6">TOY ZONE {{index}}</p>
                    <p class="tit_7">在这里为您推荐更多的产品</p>
                </div>
                <a href="#">
                    <span class="tit_8">更多</span>
                    <img src="../../statics/imgs/arrow.png" alt="">
                </a>
            </div>
        </div>  
        <div class="main">
            <ul>
                <li v-for = "item in zoneList[index].commodityList">

                    <a href="#">
                        <p class="tit_9">儿童益智拼块</p>
                        <p class="tit_10">益智开发始于此</p>
                        <img :src="item.imagePath" alt="">
                        <div class="mainCar" v-if="item.discountPrice">
                           
                                <span class="tit_11" v-if="item.discountPrice">￥{{item.discountPrice}}</span>
                                 <del class="tit_12" v-if="item.sellPrice">￥{{item.sellPrice}}</del>
                           
                           
                            <a href="#">
                                <img src="../../statics/imgs/car.png" alt="" id="mainCar">
                            </a>
                            
                        </div>
                        <div  class="mainCar" v-else>
                            
                                <span class="tit_11" v-if="item.sellPrice">￥{{item.sellPrice}}</span>
                               
                           
                           
                            <a href="#">
                                <img src="../../statics/imgs/car.png" alt="" id="mainCar">
                            </a>
                        </div>
                    </a>
                </li>
               
            </ul>
        </div>
    </div>

    
</div>
</template>

<script>
import { Toast } from 'mint-ui';
import common from '../kids/common.js';
import silder from './subcom/silder.vue';
export default {
    //注册轮播图组件
    components:{
        silder
    },
    data() {
        return {
            list: [],
            hotList:[],
            zoneList:[],
            commodityList:[]
        }

    },
    created() {
        //当页面中的data 和methods创建完毕后，自动调用created
        this.getimgs()
        this.getNav()
        this.getHot()
        this.getZone()
    },

    methods: {
       getimgs() {
            var url = common.apidomain + '/api/noauth/home/getSlideShowList';
            this.$http.post(url).then(function(res) {
                if (res.body.status != 0) {
                    Toast(res.body.message);
                    return;
                }
                this.info = res.body.message[0];
            })
        },
        //导航栏数据获取
        getNav() {
            var url = common.apidomain + '/api/noauth/home/getNavigationList';
            this.$http.post(url).then(function(res) {
                
                this.list = res.body.result;
                console.log(this.list);
            })
        },
        //热门推荐数据获取
         getHot() {
            var url = common.apidomain + '/api/noauth/home/getHotCommodityList';
            this.$http.post(url).then(function(res) {
              
                this.hotList = res.body.result;
                console.log(this.hotList);
            })
        },
        //商品专区
         getZone() {
            var url = common.apidomain + '/api/noauth/home/getNavZoneList';
            this.$http.post(url).then(function(res) {
              
                this.zoneList = res.body.result;
                this.commodityList=res.body.result[0].commodityList;
                console.log(this.commodityList);
            })
        }
        
    }
}
</script>

<style scoped>
body{
    height: 2000px;
}

/* 搜索框 */
.searchBox{
    height: 76px;
    /* border: 1px solid red; */
}
.Search{
    width: 702px;
    height: 60px;
    line-height: 60px;
    padding: 20px 264px;
    color: #C3C2C0;
    font-size: 20px;
    margin: 8px 24px;
    border-radius: 50px;

}
/* 领取优惠券 */
.coupon{
    height: 132px;
    /* border: 1px solid blue; */
}
.coupon img{
margin:16px 24px;
}
/* 导航栏 */
.nav{
    height: 338px;
    /* border: 1px solid green; */
    background-color: #fff;
}
.nav ul{
    margin: 0 30px;
    padding: 0;
    text-align: center;

}
.nav ul li{
    width: 170px;
    height: 170px;
    float: left;
    list-style: none;
    /* border: 1px solid blue; */
}
.nav ul li a{
    width: 170px;
    height: 170px;
    display: block;
    color: #000;
}
.nav ul li img{
    width: 115px;
    height: 100px;
    margin: 23px 28px 10px;;

}
 .txt{
  
    font-size: 26px;
}
.shadow{
    display: block;
    width: 12px;
    height: 110px;
    background-image: url(../../statics/imgs/shadow.png);
}
/*热门推荐 */
.hot{
    height: 92px;
    margin: 14px 0 2px;
    background-color: #fff;
    text-align: center;
}
.hot img{
    height: 49px;
    margin-top:23px;
}
/* 热门折扣 */
.hotDiscount{
    height: 303px;
    background-color: #fff;
}
.hotDiscount ul{
    width: 702px;
    height: 305px;
    margin:0 29px 0 24px;
    padding: 0;
    list-style: none;
}
.hotDiscount ul li{
   width: 205px;
   height: 152px;
   float: left;
   border-bottom: 1px dashed #EAEAEA;
   /* border-right: 1px dashed #EAEAEA; */
}
.hotDiscount ul li:nth-child(3){
    border-right: none;
} 
.hotDiscount ul li:nth-child(6){
    border-right: none;
} 
#hotA{
    color: #000;
}
.hotDiscount ul li:nth-child(1) {
     width: 290px;   
    height: 150px;
}
.hotDiscount ul li:nth-child(1) img{
    width: 42px;
    height: 50px;
    
    margin-top: -8px;
}
.hotDiscount ul li:nth-child(4) {
     width: 290px;   
     height: 150px;
}
.hotDiscount ul li:nth-child(4) img{
    width: 42px;
    height: 50px;
    margin-top: -8px;
}
/* 热门钜惠 */
.Discount_1{
    width: 248px;
    height: 152px;
    
   float: right;
}
 #milk{
    width: 78px;
    height: 136px;
    margin: 8px 15px 8px 20px; 
}
.tit{
    width: 120px;
    height: 115px;
    float: right;
    margin: 22px 15px 20px 0;
}
.tit_1{
    font-size: 26PX;
}
.tit_2{
    font-size: 16px;
    color: #A1A1A1;
}
.price{
    width: 83px;
    height: 20px;
    line-height: 20px;
    background-color: #F52A0A;
    margin-top: 46px;
}
.price span{
    color: #fff;
    font-size: 15px;
}
.price del{
    float: right;
    background-color: #fff;
    width: 32px;    
    height: 18px;
    font-size: 8px;
    margin: 1px;
}
/* 双人童车 */
.car{
    width: 88px;
    height: 106px;
    float: left;
    margin: 25px 0 18px 10px;
}
.tit_3{
    font-size: 22px;
    text-overflow : ellipsis; 
    /*  */
}
.tit_4{
    font-size: 16px;
     color: #A1A1A1;
}
#car{
    width: 104px;
    height: 122px;
    float: right;
    margin-top: 17px;
    margin-right: 2px;
}   
.last{
    width: 64px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background-color: #F52A0A;
    font-size: 14px;
    color: #fff;
    margin-top: 44px;
}
/*玩具专区 */
.show{
    width: 750px;
    height: 385px;
    margin-top: 14px;
  
/* 玩具专区头部 */
}
.header{
    height: 86px;
    background-color: #fff;
    overflow: hidden;
}
.centent{
    width: 702px;
    height: 48px;
    /* line-height: 48px; */
    margin: 19px auto ;
}
.centent img{
    width: 48px;
    height: 48px;
    float: left;
}
.tit_5{
    
    width: 150px;
    height: 30px;
    line-height: 30px;
    border-right: 4px solid  #FFD306;
    font-size: 30px;
    margin-left: 10px;
    margin-top: 10px;
    color: #DD79AD;
    float: left;
}
.Tit{
    margin-left: 12px;
    float: left;
}
.tit_6{
    font-size: 14px;
    font-family: "Microsoft YaHei";
    margin-bottom: 4px;
}
.tit_7{
    font-size: 20px;
    color:#ABABAB;
}
.centent a{
    float: right;
}
.header a{
    width: 72px;
    height: 24px;
    color: #BBBBBB;
    font-size: 26px;
    margin-top: 12px;
    float: right;

}
.txt_8{
    font-size: 26px;
    float: left;
}
.header a img{
    width: 15px;
    height: 24px;
    float: right;
}
/* 玩具专区底部 */
.main{
    height: 295px;
    margin-top: 2px;
    background-color: #fff;

}
.main ul{
    width: 714px;
    height: 294px;
    padding: 0;
    margin: 0 24px;
}
.main li{
    width: 237px;
    height: 294px;
    float: left;
    text-align: center;
    list-style: none;
    border-right: 1px dashed #E9E9E9;

}
.main li:nth-child(3){
      border-right: none;

}
.main li a{
    width: 237px;
    height: 294px;
}
.tit_9{
    font-size: 32px;
    margin-top: 22px;
    
}
.tit_10{
    margin-top: 15px;
    font-size: 20px;
    color: #BBBBBB;
}
.main li a img{
    width:158px;
    height:149px;
    
}
.mainCar{
    width: 188px;
    height: 36px;
    margin-left: 18px;
     
    margin-bottom: 10px;
}
.tit_11{
    font-size: 30px;
     color: #CF0302;
     float: left;
     margin-top: 10px;
    
}
.tit_12{
    font-size: 16px;
    color: #BBBBBB;
    float: left;
    margin-left:5px;
     margin-top: 15px;
}
#mainCar{
    width: 38px;
    height: 36px;
    margin: 0;
    padding:0;
    float: right;
}
</style>